import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart' as cupertino;
import '../myicon.dart';
import '../wigets/input.dart';

class Login extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _Login();
  }
}

class _Login extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // cupertino.Navigator.pushReplacementNamed(context, "/main");
        },
        child: Text("去主页面"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            AspectRatio(
              aspectRatio: 1.2 / 1,
              child: Image.asset(
                "assets/images/login-header.png",
                fit: BoxFit.fill,
              ),
            ),
            AspectRatio(
              aspectRatio: 1.2 / 1,
              child: Center(
                  child: Container(
                padding: const EdgeInsets.only(bottom: 80),
                child: const Text(
                  "趣无限",
                  style: TextStyle(
                      fontSize: 40,
                      color: Colors.white,
                      fontWeight: FontWeight.w800),
                ),
              )),
            ),
            Positioned(
              left: 30,
              top: MediaQuery.of(context).size.width / 2,
              child: Body(),
            )
          ],
        ),
      ),
    );
  }
}

class Body extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _Body();
  }
}

class _Body extends State<Body> {
  GlobalKey<FormState> formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20, 40, 20, 40),
      width: MediaQuery.of(context).size.width - 60,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: const [
            BoxShadow(color: Color.fromARGB(25, 70, 70, 69), blurRadius: 10)
          ]),
      child: Column(
        children: [
          Form(
              key: formKey,
              child: Column(
                children: [
                  Input(
                    onChanged: (val) {
                      print(val);
                    },
                    errortext: "请输入您的账号",
                    hintText: "请输入您的账号",
                    prefixIcon: const Icon(
                      Myicon.user,
                      color: Colors.grey,
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Input(
                    onChanged: (val) {
                      print(val);
                    },
                    obscureText: true,
                    hintText: "请输入您的密码",
                    errortext: "请输入您的密码",
                    prefixIcon: const Icon(
                      Myicon.mima,
                      color: Colors.grey,
                    ),
                  ),
                  
                ],
              )),
          const SizedBox(
            height: 30,
          ),
          Container(
              width: double.infinity,
              child: ElevatedButton(
                  onPressed: () {
                    formKey.currentState?.validate();
                  },
                  style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(
                        const Color.fromARGB(255, 255, 165, 32)),
                  ),
                  child: const Text(
                    "登录",
                    style: TextStyle(color: Colors.white),
                  ))),
          const SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              TextButton(
                  onPressed: () {
                     cupertino.Navigator.pushNamed(context, "/register");
                  },
                  child: const Text(
                    "注册账号",
                    style: TextStyle(
                      color: Color.fromARGB(255, 51, 51, 51),
                      fontSize: 12,
                    ),
                  )),
              TextButton(
                  onPressed: () {},
                  child: const Text(
                    "忘记密码？",
                    style: TextStyle(
                      color: Color.fromARGB(255, 51, 51, 51),
                      fontSize: 12,
                    ),
                  ))
            ],
          )
        ],
      ),
    );
  }
}

